<template>
  <div
    ref="page"
    class="floating-window"
    @mouseup.stop.prevent="moveEnd"
    :class="floatBtnFlag ? 'shanshuo' : ''"
  >
    <!--    <el-tooltip class="item" effect="dark" :content="tooltipTitle" placement="left">-->

    <transition name="fade">
      <div
        class="popover-content__trigger floatBtn"
        ref="floatBtn"
        v-if="!dialogVisible"
        :style="{
          transition: !moveFlags ? 'all 300ms ease' : 'unset',
          transform: `translate3d(${transform.left}px,${transform.top}px,0)`,
        }"
        @mousedown.stop.prevent="moveStart"
        @mouseover.stop.prevent="showButton"
        @mouseleave.stop.prevent="hideButton"
        @click.stop.prevent="toggleMenu"
      >
        <!--            v-model="popovervisible1"-->
        <el-popover
          class="popver"
          style="position: absolute; left: -410%; top: 0"
          placement="bottom"
          width="200"
          trigger="manual"
          :content="tooltipTitle"
          v-model="popovervisible1"
        >
        </el-popover>
        <i class="el-icon-service iconc"></i>
      </div>
    </transition>
    <!--    </el-tooltip>-->
    <el-dialog
      :title="dialogTtile"
      :visible.sync="dialogVisible"
      width="1300px"
      :before-close="handleClose"
    >
      <div class="modal-body" @mouseup="closeTnkuang">
        <div class="kefu-left">
          <template>
            <ul
              class="infinite-list"
              v-infinite-scroll="onLoad"
              :infinite-scroll-disabled="isScroll"
            >
              <div
                v-for="(i, k) in userList"
                :key="'userList' + k"
                @contextmenu.prevent="rightClick($event, k)"
              >
                <!--  v-if="
                    (i.anotherid != kefuId && i.cus_info.is_online != 1) ||
                    i.anotherid == kefuId
                  " -->
                <el-popover
                  placement="top"
                  width="200"
                  trigger="manual"
                  :ref="`popover-${k}`"
                  v-if="i.anotherid == kefuId && i.is_del == 0"
                >
                  <p class="delete" @click="closePopover(i, k)">删除</p>
                  <li
                    slot="reference"
                    :class="active == k ? 'active' : ''"
                    class="infinite-list-item"
                    @click="choose(k)"
                  >
                    <!-- {{ (i.is_show&&(i.is_show==kefuId)) }} -->
                    <!-- {{  i.cus_info.is_online  }} -->
                    <!-- {{  i.userid != kefuId&&i.cus_info.is_online==1?'hui':'zhengchang'  }} -->
                    <el-image
                      style="
                        width: 45px;
                        height: 45px;
                        margin-right: 10px;
                        border-radius: 50%;
                      "
                      class="leftAvatar"
                      v-if="i.userinfo"
                      :src="imgHeader + i.userinfo.avatar"
                      fit="cover"
                    ></el-image>
                    <div class="infoRight">
                      <div class="title">
                        <div class="titlename" v-if="i.userinfo">
                          {{ i.userinfo.nickname }}
                        </div>
                        <div class="time">
                          {{ i.time_text }}
                        </div>
                      </div>
                      <div class="message" v-if="i.message.length > 0">
                        <div
                          v-if="
                            typeof i.message[i.message.length - 1].message ==
                            'string'
                          "
                        >
                          <text
                            v-if="
                              i.message[i.message.length - 1].message.split(
                                '.'
                              )[1] == 'mp4'
                            "
                            >[视频]</text
                          >
                          <span
                            v-else-if="
                              i.message[i.message.length - 1].message.split(
                                '.'
                              )[1] == 'png'
                            "
                            >[图片]</span
                          >
                          <span
                            v-else-if="
                              i.message[i.message.length - 1].message.split(
                                '.'
                              )[1] == 'jpg'
                            "
                            >[图片]</span
                          >
                          <span
                            v-else-if="
                              i.message[i.message.length - 1].message.split(
                                '.'
                              )[1] == 'image'
                            "
                            >[图片]</span
                          >
                          <span v-else>{{
                            i.message[i.message.length - 1].message
                          }}</span>
                        </div>
                        <div v-else>[位置]</div>
                        <!--                            {{i.message[i.message.length-1].message.split('.')[1]=='mp4'?'视频':i.message[i.message.length-1].message.split('.')[1]=='png'?'图片':i.message[i.message.length-1].message}}-->
                      </div>
                    </div>
                    <!--                    &#45;&#45;&#45;&#45;{{i.id}}-->
                    <!--                        未读-->
                    <div class="unread" v-if="i.unreads >= 1">
                      <el-badge :value="i.unreads" class="item"> </el-badge>
                    </div>
                  </li>
                </el-popover>
              </div>
            </ul>
          </template>
        </div>
        <div v-if="activeObj" class="kefu-center">
          <div class="kefu-center" v-if="activeObj.userinfo">
            <div class="top" v-if="activeObj.userinfo">
              {{ activeObj.userinfo.nickname }}
            </div>
            <div class="chatHistory">
              <div class="chat_scroll" ref="scroll">
                <div
                  v-for="(item, index) in activeObj.message"
                  class="bubbleBox"
                  v-if="item.type < 10 || item.type == 100"
                  :class="[item.type == 5 ? 'weizhi' : '']"
                >
                  <!-- {{ item.user_type }} -->
                  <div>
                    <div class="status" v-if="item.issendtime == 1">
                      <span class="span">
                        {{ item.sendtime }}
                      </span>
                    </div>
                    <div
                      class="bubble"
                      :class="[
                        item.user_type == 2 ? 'me' : 'you',
                        item.type < 10 ? 'a' : 'b',
                      ]"
                    >
                      <span v-if="item.type == 1">{{ item.message }}</span>
                      <span v-if="item.type == 100"
                        >用户对您的评价{{ item.message }}</span
                      >
                      <el-image
                        @load="imgLoad"
                        :src="imgHeader + item.message"
                        :preview-src-list="srcList"
                        fit="cover"
                        v-if="item.type == 2"
                        class="image"
                      ></el-image>
                      <video
                        class="video"
                        controls
                        autoplay
                        :src="imgHeader + item.message"
                        v-if="item.type == 4"
                      ></video>
                      <div
                        v-if="item.type == 5"
                        @click="chakanweizhi(item.message.name)"
                      >
                        <div class="title">{{ item.message.name.name }}</div>
                        <div class="address">
                          {{ item.message.name.address }}
                        </div>
                        <div>
                          <el-image :src="item.message.name.src"></el-image>
                        </div>
                      </div>
                    </div>
                    <div style="clear: both"></div>
                  </div>
                </div>
                <div
                  class="unreadBox"
                  v-if="
                    activeObj.message.length > 0 &&
                    activeObj.message[activeObj.message.length - 1].userid ==
                      kefuId &&
                    activeObj.message[activeObj.message.length - 1].user_type ==
                      2
                  "
                >
                  <span v-if="yiduFlag">已读</span>
                  <span v-else>未读</span>
                </div>
              </div>
            </div>
            <!-- 以下是聊天输入框 -->
            <div class="write">
              <div class="write_top">
                <el-popover
                  placement="top"
                  width="400"
                  trigger="manual"
                  v-model="popovervisible"
                >
                  <span
                    v-for="(item, index) in emojiList"
                    :key="'emojiList' + index"
                    @click="selectEmoji(index)"
                    class="emoji"
                    >{{ item }}</span
                  >
                  <i
                    slot="reference"
                    @click="popover()"
                    class="icon iconfont icon-Smile"
                  ></i>
                </el-popover>

                <div class="select_file">
                  <el-upload
                    class="upload-demo"
                    action
                    :http-request="uploadFile"
                    ref="upload"
                    :limit="fileLimit"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :on-exceed="handleExceed"
                    :before-upload="beforeUpload"
                    :show-file-list="false"
                    :headers="headers"
                  >
                    <i class="icon el-icon-picture-outline-round"></i>
                  </el-upload>
                  <!--                    <input type="file" id="chatfile" accept="video/*,image/gif,image/jpeg,image/jpg,image/png" @change="changeMethods">-->
                </div>
                <!--                  <i class="icon el-icon-picture-outline-round"></i>-->
                <span class="write_top_span">按下Enter发送消息</span>
              </div>
              <el-input
                ref="messageInput"
                type="textarea"
                placeholder="请输入内容"
                @input="messageChange"
                v-model="content"
                class="kefu_message"
                id="kefu_message"
                @keydown.enter.native="keyDown"
                @blur="blur"
                @click.native="inputTags($event)"
                @focus.stop.prevent="focus($event)"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="kefu-right" v-if="userList.length > 0">
          <div class="head">
            <span @click="showKu" :class="khShow ? 'headTrue' : ''"
              >客户资料</span
            >
            <span @click="showDd" :class="ddShow ? 'headTrue' : ''">{{
              this.seller_user_cus_type == 19 ? "发布房源" : "订单列表"
            }}</span>
          </div>
          <!-- 客户资料 -->
          <div class="khzl" v-show="khShow">
            <div class="center">
              <el-image
                :src="imgHeader + this.consumptionData.avatar"
                fit="cover"
              ></el-image>
              <div class="info">
                <div>用户名:{{ this.consumptionData.nickname }}</div>
                <div>用户ID:{{ this.consumptionData.id }}</div>
              </div>
            </div>
            <p class="xiaofei" v-if="seller_user_cus_type != 19">消费记录</p>
            <div class="footer" v-if="seller_user_cus_type != 19">
              <div>
                <p>订单数量</p>
                <p>{{ this.consumptionData.OrderQuantity }}</p>
              </div>
              <div>
                <p>消费金额（元）</p>
                <p>{{ this.consumptionData.ConsumptionAmount }}</p>
              </div>
              <div>
                <p>客单价（元）</p>
                <p>{{ this.consumptionData.CustomerUnitPrice }}</p>
              </div>
            </div>
          </div>
          <!-- 订单列表 -->
          <div class="ddlb" v-show="ddShow">
            <div v-if="seller_user_cus_type != 19">
              <el-form
                :inline="true"
                :model="formSearch"
                class="demo-form-inline"
              >
                <el-form-item label="订单号">
                  <el-input
                    v-model="formSearch.order_id"
                    placeholder="请输入订单号"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
              <div
                class="libox"
                v-for="(item, index) in orderData"
                :key="'orderData' + index"
              >
                <div class="state">
                  <span>订单编号:{{ item.order_id }}</span>
                  <span>{{ item.status_text }}</span>
                </div>
                <div class="shops">
                  <!-- <img
                  :src="imgHeader + item.items[0].goods.img"
                  alt=""
                /> -->

                  <!-- <el-image
                  v-if="!item.order_type"
                  style="width: 120px; height: 120px"
                  :src="imgHeader + '/uploads/20240524/f7fc4a1b05da0b1dd22744f81fbdfaf.png'"
                  fit="fit"
                ></el-image>
                <el-image
                  v-if="
                    item.order_type == 1 ||
                    item.order_type == 3 ||
                    item.order_type == 4 ||
                    item.order_type == 5 ||
                    item.order_type == 11 ||
                    item.order_type == 12
                  "
                  style="width: 120px; height: 120px"
                  :src="imgHeader + '/uploads/20240524/f7fc4a1b05da0b1dd22744f81fbdfaf.png'"
                  fit="fit"
                ></el-image>
                <el-image
                  v-if="
                    item.order_type == 2 &&
                    JSON.parse(item.maint[0].files_user)[0].fileType === 'image'
                  "
                  class="pic"
                  style="width: 120px; height: 120px"
                  fit="cover"
                  :src="
                    item.maint[0].files_user
                      ? imgHeader +
                        '/uploads/20240524/f7fc4a1b05da0b1dd22744f81fbdfaf.png'
                      : ''
                  "
                  :preview-src-list="[
                    item.maint[0].files_user
                      ? imgHeader +
                        '/uploads/20240524/f7fc4a1b05da0b1dd22744f81fbdfaf.png'
                      : '',
                  ]"
                ></el-image> -->
                  <div class="col">
                    <span>订单金额</span>
                    <!-- <span>商品数量</span> -->
                  </div>
                  <div class="col" id="col2">
                    <span>￥{{ item.order_amount }}</span>
                    <!-- <span>*{{ item.nums }}</span> -->
                  </div>
                </div>
                <p class="time">下单时间: {{ item.ctime }}</p>
                <!-- <p class="money">订单金额: 567</p> -->
                <div class="btn">
                  <button @click="onOrderDetail(item)">订单详情</button>
                  <button @click="onRemark(item.order_id)">备注</button>
                  <button @click="onRemarkLook(item.order_id)">查看备注</button>
                </div>
              </div>
            </div>
            <div v-if="seller_user_cus_type == 19">
              <div
                class="houseUl"
                v-for="(item, index) in orderData"
                :key="'orderData' + index"
              >
                <div class="houseLi">
                  <div class="topBox">
                    <p>
                      类型：{{
                        item.type == 1
                          ? "商铺转让"
                          : item.type == 2
                          ? "商铺租赁"
                          : item.type == 3
                          ? "写字楼租赁"
                          : "住宅租赁"
                      }}
                    </p>
                    <p>
                      {{
                        item.status == 1
                          ? "未审核"
                          : item.status == 3
                          ? "审核失败"
                          : item.status == 2 && item.is_up == 1
                          ? "上架"
                          : "下架"
                      }}
                    </p>
                  </div>
                  <div class="centerBox">
                    <el-image
                      style="width: 120px; height: 120px"
                      :src="
                        imgHeader +
                        item.housing_source_door_head_img.split(',')[0]
                      "
                      fit="cover"
                    ></el-image>
                    <div>
                      <p>{{ item.housing_source_title }}</p>
                      <p>{{ item.propertyTags }}</p>
                      <div class="addressBox">
                        <p>{{ item.region_name }}</p>
                        <!-- <p>{{ "社区" }}</p> -->
                      </div>
                      <div class="addressBox">
                        <p>{{ item.architecture_rent + "/月" }}</p>
                        <p>{{ item.transfer_fee + "万元转让费" }}</p>
                        <p>{{ item.architecture_area + "㎡" }}</p>
                      </div>
                      <div>发布时间：{{ item.creatdate }}</div>
                    </div>
                  </div>
                  <div class="footerBox">
                    <button @click="houseDetail(item)">详情</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- <div class="libox">
              <div class="state">
                <span>已完成</span>
                <span>订单编号:19347023027452</span>
              </div>
              <div class="shops">
                <img src="../../../static/111.jpg" alt="" />
                <div class="col">
                  <span>商品名称</span>
                  <span>规格</span>
                </div>
                <div class="col" id="col2">
                  <span>￥1234</span>
                  <span>*5</span>
                </div>
              </div>
              <p class="time">下单时间: 2023-11-12 15:23:34</p>
              <p class="money">订单金额: 567</p>
              <div class="btn">
                <button>订单详情</button>
                <button>备注</button>
              </div>
            </div>
            <div class="libox">
              <div class="state">
                <span>已完成</span>
                <span>订单编号:19347023027452</span>
              </div>
              <div class="shops">
                <img src="../../../static/111.jpg" alt="" />
                <div class="col">
                  <span>商品名称</span>
                  <span>规格</span>
                </div>
                <div class="col" id="col2">
                  <span>￥1234</span>
                  <span>*5</span>
                </div>
              </div>
              <p class="time">下单时间: 2023-11-12 15:23:34</p>
              <p class="money">订单金额: 567</p>
              <div class="btn">
                <button>订单详情</button>
                <button>备注</button>
              </div>
            </div> -->
          </div>
          <el-pagination
            v-show="ddShow"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 100, 200, 300]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
            :total="total"
            :pager-count="pagerCount"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 查看建材订单详情弹出框 -->
      <el-dialog
        :visible.sync="dialogVisibleOrder"
        width="60%"
        :before-close="handleClose2"
        append-to-body
      >
        <span>
          <el-form ref="dataCollection" label-width="100px">
            <span>
              <h4>商家信息</h4>
            </span>
            <el-form-item label="商家名称" class="spanMag">
              {{ form.seller_shop_name }}
            </el-form-item>
            <el-form-item label="负责人姓名" class="spanMag">
              {{ form.manager_name }}</el-form-item
            >
            <span>
              <h4>用户信息</h4>
            </span>
            <el-form-item label="用户名" class="spanMag"
              >{{ form.nickname }}
            </el-form-item>
            <!-- <el-form-item label="用户手机号" class="spanMag">
            {{ form.mobile }}
          </el-form-item> -->
            <span>
              <h4>收货人信息</h4>
            </span>
            <el-form-item label="收货人" class="spanMag">
              {{ form.ship_name }}</el-form-item
            >
            <el-form-item label="联系方式" class="spanMag">
              {{ form.ship_mobile }}</el-form-item
            >
            <el-form-item label="收货地址" class="spanMag">
              {{ form.ship_address_ds }}</el-form-item
            >
            <el-form-item
              label="支付方式"
              class="spanMag"
              v-if="form.order_type != 3 && form.order_type != 11"
            >
              {{ form.payment_code_text }}
            </el-form-item>
            <!-- <div v-if="this.form.length != 0"> -->
            <span>
              <h4>配送信息</h4>
            </span>
            <el-form-item label="配送方式" class="spanMag">
              {{ form.delivery_method_text }}</el-form-item
            >
            <el-form-item label="运费" class="spanMag">
              {{ form.sender_amount }}
            </el-form-item>
            <el-form-item label="上楼方式" class="spanMag">
              {{ form.up_method_text }}
            </el-form-item>
            <el-form-item
              label="首楼踏数"
              class="spanMag"
              v-if="form.up_method > 1 && form.up_method == 3"
            >
              {{ form.up_method_text }}踏
            </el-form-item>
            <el-form-item
              label="后续楼层"
              class="spanMag"
              v-if="form.up_method > 1 && form.up_method == 3"
            >
              {{ form.floors_num }}楼
            </el-form-item>
            <el-form-item
              label="平移搬运距离"
              class="spanMag"
              v-if="form.up_method > 1"
            >
              {{ form.transport }}米
            </el-form-item>
            <el-form-item
              label="途中台阶数"
              class="spanMag"
              v-if="form.up_method > 1"
            >
              {{ form.way_footstep_num }}踏
            </el-form-item>
            <!-- </div> -->
            <span>
              <h4>发票信息</h4>
            </span>
            <el-form-item class="spanMag fapiao">
              <el-descriptions title="">
                <el-descriptions-item
                  label="发票ID"
                  v-if="form.fapiao_status == 1"
                  >{{ form.invoice[0].id }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="抬头"
                  v-if="form.fapiao_status == 1"
                  >{{ form.invoice[0].name }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="手机号"
                  v-if="form.fapiao_status == 1"
                  >{{ form.invoice[0].phone }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="邮箱"
                  v-if="form.fapiao_status == 1"
                  >{{ form.invoice[0].email }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="发票类型"
                  v-if="form.fapiao_status == 1"
                  >{{
                    form.invoice[0].type == 1 ? "个人" : "企业"
                  }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="税号"
                  v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                  >{{ form.invoice[0].duty }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="企业地址"
                  v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                  >{{ form.invoice[0].address }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="企业电话"
                  v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                  >{{ form.invoice[0].enterprise_phone }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="开户行名称"
                  v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                  >{{ form.invoice[0].row_name }}</el-descriptions-item
                >
                <el-descriptions-item
                  label="开户行账号"
                  v-if="form.fapiao_status == 1 && form.invoice[0].type == 2"
                  >{{ form.invoice[0].account }}</el-descriptions-item
                >
                <el-descriptions-item label="提示">
                  <el-tag size="small">暂无开票</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>
            <span>
              <h4>订单备注</h4>
            </span>
            <el-form-item label="订单备注" class="spanMag">
              {{ form.remark }}</el-form-item
            >
            <span>
              <h4>商品信息</h4>
            </span>
            <!-- <el-form-item label="商品信息" class="spanMag"> -->
            <el-table
              border
              style="width: 100%"
              class="spanMag"
              :data="form.goods_lists"
            >
              <el-table-column
                prop="gooda_name"
                align="center"
                label="商品名称"
              >
              </el-table-column>
              <el-table-column prop="price" align="center" label="商品单价">
              </el-table-column>
              <el-table-column prop="nums" align="center" label="购买数量">
              </el-table-column>
              <el-table-column prop="amount" align="center" label="商品总价">
                <template slot-scope="scope">
                  {{ scope.row.nums * scope.row.price }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否截断">
                <template slot-scope="scope">
                  {{ scope.row.truncation == 3 ? "否" : "是" }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="截断备注">
                <template slot-scope="scope">
                  {{
                    scope.row.truncation == 1
                      ? "2米截断"
                      : scope.row.truncation_note
                  }}
                </template>
              </el-table-column>
            </el-table>
            <!-- </el-form-item> -->
            <div class="textFor">商品总价:{{ form.goods_amount }} 元</div>
            <!-- <span style="margin-top: 20px; display: block;">
              <h4>退货单</h4>
            </span>  -->
            <!-- <div>
              <el-form-item label="退货单" class="spanMag">
                <el-table max-height="200" :data="form.returnItem" border style="width: 100%">
                  <el-table-column prop="reship_id" label="退货单号" width="">
                  </el-table-column>
                  <el-table-column prop="aftersales_id" label="售后单号" width="">
                  </el-table-column>
                  <el-table-column prop="status_text" label="退货状态" width="150">
                  </el-table-column>
                  <el-table-column prop="ctime" label="退货时间">
                  </el-table-column>
                </el-table>
              </el-form-item>
            </div> -->
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="backtrack">返回</el-button>
        </span>
      </el-dialog>
      <!-- 备注弹出框 -->
      <el-dialog
        title="备注"
        :visible.sync="dialogVisibleRemark"
        width="40%"
        :before-close="handleClose3"
        append-to-body
      >
        <span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="remarkText"
          >
          </el-input>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleSure">确定</el-button>
          <el-button @click="handleBack">返回</el-button>
        </span>
      </el-dialog>
      <!-- 查看备注弹出框 -->
      <el-dialog
        title="查看备注"
        :visible.sync="dialogVisibleLookRemark"
        width="35%"
        :before-close="handleClose4"
        append-to-body
      >
        <div class="beizhu">
          <div
            class="libox"
            v-for="(item, index) in remarkData"
            :key="'remarkData' + index"
          >
            <div class="kefu">
              <span>客服名称:{{ item.customer_name }}</span>
              <span>客服工号:{{ item.job_number }}</span>
            </div>
            <div class="kefu">
              <span>备注时间:{{ item.time }}</span>
            </div>
            <div class="wenzi">
              {{ item.customer_notes }}
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 查看水站，超市，快修，房地产订单详情弹出框 -->
      <el-dialog
        title="查看订单详情"
        :visible.sync="OrderDetailDialog"
        width="50%"
        append-to-body
      >
        <waterOrder
          :waterOrderDetailId="waterOrderDetailId"
          :orderType="orderType"
          v-if="waterOrderDetailDialog"
        >
        </waterOrder>
        <houseOrder
          :houseId="houseId"
          v-if="houseOrderDetailDialog"
        ></houseOrder>
        <kuaiXiuOrder
          :waterOrderDetailId="waterOrderDetailId"
          v-if="kuaiXiuOrderDetailDialog"
        ></kuaiXiuOrder>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import waterOrder from "../common/waterOrderListDetail.vue";
import houseOrder from "../common/houseOrderDetail.vue";
import kuaiXiuOrder from "../pages/kuaixiu/dingdan/ddxq.vue";
import {
  getKefu,
  uploadFilec,
  kefuDeteleChat,
  goodsOrder,
  jiancaiOrderDetails,
} from "../../utils/api";
import { getPropertyTags } from "../../utils/main";
import {
  getMainCustomerInformation,
  getMainCustomerRemark,
  getMainCustomerRemarkCheck,
  getFloatBtnOrderList,
} from "../../utils/main";
import Vue from "vue";
import deep from "deep";
export default {
  name: "floatingWindow",
  props: ["userIds_1", "listToken", "chat_id"],
  components: {
    waterOrder,
    houseOrder,
    kuaiXiuOrder,
  },
  data() {
    return {
      userIds: this.userIds_1,
      waterOrderDetailDialog: false,
      houseOrderDetailDialog: false,
      OrderDetailDialog: false,
      kuaiXiuOrderDetailDialog: false,
      waterOrderDetailId: "",
      houseId: "",
      orderType: "",
      imgHeader: this.Global.imgHeader,
      kefuId: sessionStorage.getItem("seller_user_id"),
      seller_user_cus_type: sessionStorage.getItem("seller_user_cus_type"),
      // 展示客户资料还是订单列表
      khShow: true,
      ddShow: false,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      formOrder: { aaa: "咋说" },
      formDialog: [{ aaa: 23 }],
      dialogVisibleOrder: false,
      dialogVisibleRemark: false,
      dialogVisibleLookRemark: false,
      propertyTags: [],
      remarkData: [],
      remarkText: "",
      formSearch: { order_id: "" },
      // 客户资料信息
      consumptionData: {
        id: "",
        avatar: "",
        nickname: "",
        mobile: "",
        // 累计订单数量
        OrderQuantity: "",
        // 累计消费金额
        ConsumptionAmount: "",
        // 客单价
        CustomerUnitPrice: "",
      },
      // 订单列表
      orderData: [],
      form: [
        {
          name: "",
        },
      ],
      order_id: "",
      // 客服id
      CustomerService_id: sessionStorage.getItem("seller_user_id"),
      // 以下不是我写的
      yiduFlag: false,
      fileLimit: 1,
      fileList: [],
      fileType: ["png", "jpg", "jpeg", "video", "mp4", "audeo"],
      headers: { "Content-Type": "multipart/form-data" },
      token: sessionStorage.getItem("token"),
      moveFlags: false,
      clickFlags: false,
      clientWidth: document.body.clientWidth,
      clientHeight: document.body.clientHeight,
      transform: {
        top: document.body.offsetHeight - 300,
        left: document.body.offsetWidth - 30,
      },
      page: 1,
      page1: 1,
      limit: 10,
      total: 0,
      pagerCount: 5,
      pageSize: 10,
      dialogVisible: false,
      isScroll: false,
      userList: [],
      active: -1,
      activeObj: {},
      scrollFlag: false,
      content: "",
      srcList: [],
      popovervisible: false,
      floatBtnFlag: false,

      emojiList: [
        "😊",
        "😅",
        "😲",
        "😭",
        "😂",
        "😄",
        "😩",
        "😞",
        "😵",
        "😒",
        "😍",
        "😤",
        "😜",
        "😝",
        "😋",
        "😘",
        "😚",
        "😷",
        "😳",
        "😃",
        "😆",
        "😁",
        "😢",
        "😨",
        "😠",
        "😣",
        "😌",
        "😖",
        "😔",
        "😰",
        "😱",
        "😪",
        "😏",
        "😓",
      ],
      blurIndex: null,
      dialogTtile: "连接断开",
      tooltipTitle: "消息",
      popovervisible1: false,
      list_token: "",
    };
  },
  computed: {
    nowTime() {
      let now = new Date();
      return now.getTime();
    },
  },
  methods: {
    // 点击客户资料，显示客户资料，不显示订单列表
    showKu() {
      this.khShow = true;
      this.ddShow = false;
      this.getCustomerInformation();
      // console.log(111);
    },
    // 点击订单列表，显示订单列表，不显示客户资料
    showDd() {
      this.khShow = false;
      this.ddShow = true;
      // console.log(222);
      this.goodsOrder();
    },
    onRemark(id) {
      this.dialogVisibleRemark = true;
      this.order_id = id;
      this.remarkText = "";
      // console.log(id);
    },
    onRemarkLook(id) {
      this.dialogVisibleLookRemark = true;
      getMainCustomerRemarkCheck(sessionStorage.getItem("token"), id).then(
        (res) => {
          if (res.data.status == true) {
            this.remarkData = res.data.data;
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 5000);
          }
        }
      );
    },
    houseDetail(row) {
      console.log("99");
      this.houseId = row.id;
      this.OrderDetailDialog = true;
      this.houseOrderDetailDialog = true;
    },
    onOrderDetail(row) {
      this.waterOrderDetailId = row.order_id;
      console.log(row.order_type);
      if (row.order_type != undefined) {
        console.log("kikk");
        this.OrderDetailDialog = true;
        if (
          row.order_type == 1 ||
          row.order_type == 3 ||
          row.order_type == 4 ||
          row.order_type == 5 ||
          row.order_type == 10 ||
          row.order_type == 11 ||
          row.order_type == 12
        ) {
          this.orderType = row.order_type;
          this.waterOrderDetailDialog = true;
        } else if (row.order_type == 2) {
          this.kuaiXiuOrderDetailDialog = true;
        }
      } else {
        //详情
        this.dialogVisibleOrder = true;
        jiancaiOrderDetails(sessionStorage.getItem("token"), row.order_id).then(
          (res) => {
            if (res.data.status) {
              // this.dialogVisible = true;
              // console.log("order_id", order_id);
              this.form = res.data.data;
              // console.log(this.form);
              //1, //配送方式 1商家配送 2用户自提
              if (this.form.delivery_method == 1) {
                this.form.delivery_method_text = "商家配送";
              }
              if (this.form.delivery_method == 2) {
                this.form.delivery_method_text = "用户自提";
              }

              //1原地卸货 2 电梯上楼 3 楼梯上楼
              if (this.form.up_method == 1) {
                this.form.up_method_text = "原地卸货";
              }
              if (this.form.up_method == 2) {
                this.form.up_method_text = "电梯上楼";
              }
              if (this.form.up_method == 3) {
                this.form.up_method_text = "楼梯上楼";
              }

              if (this.form.payment_code == null) {
                this.form.payment_code_text = "未支付";
              } else if (this.form.payment_code == "materialspay") {
                this.form.payment_code_text = "余额支付";
              } else if (this.form.payment_code == "wechatpay") {
                this.form.payment_code_text = "微信支付";
              }
            }
          }
        );
      }
    },
    backtrack() {
      this.dialogVisibleOrder = false;
    },
    // 以下不是我写的
    chakanweizhi(e) {
      let poction = e.latitude + "," + e.longitude;
      window.open(
        `https://apis.map.qq.com/uri/v1/geocoder?coord=${poction}&referer=百街后台`
      );
    },
    getlist() {
      let list = [];
      getKefu(sessionStorage.getItem("token"), this.list_token, 1, 10).then(
        (res) => {
          if (res.data.status) {
            list = res.data.data;
            let list2 = [];

            console.log(
              "-=assssssssssssssssssssssssssssssssss",
              res.data.data,
              this.active
            );
            console.log(list);

            if (this.activeObj && this.activeObj.id) {
              this.active = list.findIndex((item) => {
                return item.id == this.activeObj.id;
              });
            } else {
              this.active = list.findIndex((item) => {
                return (
                  item.anotherid == sessionStorage.getItem("seller_user_id")
                );
              });
            }

            if (list.length >= 1) {
              this.activeObj =
                res.data.data.length > 0
                  ? this.active == -1
                    ? {}
                    : res.data.data[this.active]
                  : {};
            }
            if (this.dialogVisible) {
              this.floatBtnFlag = false;
              let msg = {
                type: "u_yidu",
                user_id: sessionStorage.getItem("seller_user_id"), //我的id
                chat_id: this.activeObj.chatid,
                is_kf: 2,
              };
              // this.$parent.websocketsend(JSON.stringify(msg));
              // this.$parent.$parent.websocketsend(JSON.stringify(msg));
              if (this.dialogVisible) {
                this.websocketsend(JSON.stringify(msg));
              }
            } else {
              this.floatBtnFlag = list.some((v) => v.unreads > 0);
            }
          }
        }
      );
    },
    gettimestmp(e) {
      let time1 = new Date(e);
      let time = time1.getTime();
      return time;
    },

    changeMethods(e) {
      // console.log(e.target.files[0])
    },
    selectIndex() {
      // console.log('asdasdasd')
    },
    closePopover(i, k) {
      this.userList.forEach((item, index) => {
        this.$refs["popover-" + index][0].doClose();
      });
      this.$confirm("此操作将删除该聊天, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          kefuDeteleChat(sessionStorage.getItem("token"), i.id)
            .then((res) => {
              if (res.data.status) {
                // console.log(res)
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                if (this.active >= 0) {
                  this.active = this.userList.findIndex((item) => {
                    return (
                      item.anotherid == sessionStorage.getItem("seller_user_id")
                    );
                  });
                } else {
                  this.active -= 1;
                }
                this.userList.splice(k, 1);
                this.activeObj = this.userList[this.active];
              }
            })
            .catch((err) => {
              this.$message.error();
            });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    popover() {
      this.popovervisible = true;
      this.$refs.messageInput.focus();
      // return
      // this.$refs.messageInput.$el.children[0].setSelectionRange(this.blurIndex,this.blurIndex)
    },
    selectEmoji(i) {
      this.popovervisible = false;
      let head = this.content.slice(0, this.blurIndex);
      let center = this.emojiList[i];
      let lsat = this.content.slice(this.blurIndex);
      this.content = head + center + lsat;
      this.$refs.messageInput.focus();
      this.$refs.messageInput.$el.children[0].setSelectionRange(
        this.blurIndex,
        this.blurIndex
      );
    },
    getNowTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      return year + "-" + month + "-" + day + " " + hour + ":" + minute;
    },
    keyDown(e) {
      if (e.ctrlKey && e.keyCode == 13) {
        //用户点击了ctrl+enter触发
        this.content += "\n";
        this.$nextTick(() => {
          setTimeout(() => {
            const textarea = document.getElementById("kefu_message");
            textarea.scrollTop = textarea.scrollHeight;
          }, 13);
        });
      } else {
        //用户点击了enter触发
        // 执行一些逻辑方法
        if (!this.content.trim()) {
          this.content = "";
          // console.log(this.content)
        } else {
          let list_id = -1;
          if (this.activeObj.message.length > 0) {
            list_id =
              this.activeObj.message[this.activeObj.message.length - 1].id;
          } else {
            list_id = -1;
          }
          // user_type //1用户  2客服
          // console.log(this.activeObj)
          let msg = {
            type: "u_fasong",
            types: 1,
            message: this.content,
            user_id: this.activeObj.anotherid, //我的id
            uid: this.activeObj.userid, //我要发送给目标的id
            chat_id: this.activeObj.chatid,
            list_id: list_id,
            house_type: 1,
            user_type: 2,
            is_nill: 1,
            is_kf: 2,
            timestamp: Math.floor(new Date().getTime() / 1000),
          };
          // if(this.activeObj.is_show){
          //   msg.recid = this.activeObj.is_show
          // }
          this.websocketsend(JSON.stringify(msg));
          this.activeObj.message.push({
            chatid: this.activeObj.chatid,
            id:
              this.activeObj.message[this.activeObj.message.length - 1].id + 1,
            isdel: null,
            isdels: null,
            message: this.content,
            sendtime: this.getNowTime(),
            timestamp: Math.floor(new Date().getTime() / 1000),
            type: 1,
            userid: sessionStorage.getItem("seller_user_id"), //我的id
            house_type: 1,
            user_type: 2,
          });
          this.content = "";
          this.$nextTick(() => {
            if (this.$refs.scroll) {
              this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
              // console.log(this.$refs.scroll.scrollTop)
            }
          });
          this.yiduFlag = false;
          this.chongzhidiyi();
        }
        if (e != undefined) {
          e.preventDefault(); // 阻止浏览器默认的敲击回车换行的方法
        }
      }
    },
    chongzhidiyi() {
      let obj = {};
      this.userList.forEach((item, index) => {
        if (item.chatid == this.activeObj.chatid) {
          obj = item;
          this.userList.splice(index, 1);
        }
      });

      this.userList.unshift(obj);
      // this.userList[e].userid != this.kefuId&&this.userList[e].cus_info.is_online==1
      let list = this.userList.filter((item) => {
        return item;
      });
      console.log(list, "=========================");
      if (this.activeObj && this.activeObj.id) {
        this.active = list.findIndex((item) => {
          return item.id == this.activeObj.id;
        });
      } else {
        this.active = list.findIndex((item) => {
          return item.anotherid == sessionStorage.getItem("seller_user_id");
        });
      }
    },
    focus(e) {
      this.blurIndex = this.$refs.messageInput.$el.children[0].selectionStart;

      e.target.setSelectionRange(this.blurIndex, this.blurIndex);
    },
    messageChange(e) {
      console.log(e);
    },
    inputTags(e) {
      this.blurIndex = this.$refs.messageInput.$el.children[0].selectionStart;
      this.$refs.messageInput.$el.children[0].setSelectionRange(
        this.blurIndex,
        this.blurIndex
      );
    },
    blur() {
      // console.log('blur')
      if (this.popovervisible) {
        this.popovervisible = false;
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.popovervisible1 = false;
    },
    handleClose2() {
      this.dialogVisibleOrder = false;
    },
    handleClose3() {
      this.remarkText = "";
      this.dialogVisibleRemark = false;
    },
    handleClose4() {
      this.dialogVisibleLookRemark = false;
    },
    // 房源标签
    async getHousePropertyTags() {
      // this.loading = true;
      let res = await getPropertyTags(
        sessionStorage.getItem("token"),
        "",
        1,
        100
      );
      if (res.data.status) {
        this.propertyTags = res.data.data.data || [];
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    // 获取订单列表
    goodsOrder() {
      // this.loading = true;
      // goodsOrder(sessionStorage.getItem("token"), this.userIds, "", "", "", "", "", "", 1, 10).then(
      //   (res) => {
      //     if (res.data.status) {
      //       // console.log(res.data.data.count);
      //       this.orderData = res.data.data.data;
      //       // this.total = res.data.data.count;
      //       this.orderData.forEach((item) => {
      //         item.items[0].goods.img = item.items[0].goods.img.split(",")[0];
      //         if (item.status == 1) {
      //           if (item.pay_status == 1) {
      //             item.status_text = "待支付";
      //           }
      //           if (item.pay_status == 2) {
      //             if (item.ship_status == 1) {
      //               item.status_text = "未接单";
      //             }
      //             if (item.ship_status == 2) {
      //               item.status_text = "已接单";
      //             }
      //             if (item.ship_status == 3) {
      //               item.status_text = "已发货";
      //             }
      //             if (item.ship_status == 4) {
      //               item.status_text = "已送达";
      //             }
      //           }
      //         }
      //         if (item.status == 2) {
      //           item.status_text = "已完成";
      //         }
      //         if (item.status == 3) {
      //           item.status_text = "已取消";
      //         }
      //         item.allPirce =
      //           Number(item.order_amount).toFixed(2) +
      //           Number(item.sender_amount).toFixed(2);
      //       });
      //       // this.tableData = list;
      //       let timer = setTimeout(() => {
      //         this.loading = false;
      //         clearTimeout(timer);
      //       }, 400);
      //     }
      //   }
      // );
      if (this.seller_user_cus_type == 19) {
        this.formSearch.order_id = "";
      }
      getFloatBtnOrderList(
        sessionStorage.getItem("token"),
        this.formSearch.order_id,
        this.userIds,
        this.kefuId,
        this.page1,
        this.limit
      ).then((res) => {
        if (res.data.status) {
          console.log(
            res.data.data.data,
            "res.data.data.countres.data.data.count"
          );
          this.orderData = res.data.data.data;
          this.total = res.data.data.count;
          console.log(this.orderData);

          this.orderData.forEach((item) => {
            if (this.seller_user_cus_type == 19) {
              // 房源标签
              let newArr2 = [];
              let arr3 = item.housing_housing_label_association;
              let arr4 = this.propertyTags;
              for (let i = 0; i < arr3.length; i++) {
                for (let j = 0; j < arr4.length; j++) {
                  if (arr3[i].housing_label_id == arr4[j].id) {
                    newArr2.push(arr4[j].name);
                  }
                }
              }
              item.propertyTags = newArr2.join(",");
              // 以上是房源标签
            } else {
              if (!item.order_type) {
                item.items[0].goods.imgs =
                  item.items[0].goods.img.split(",")[0];
                if (item.status == 1) {
                  if (item.pay_status == 1) {
                    item.status_text = "待支付";
                  }
                  if (item.pay_status == 2) {
                    if (item.ship_status == 1) {
                      item.status_text = "未接单";
                    }
                    if (item.ship_status == 2) {
                      item.status_text = "已接单";
                    }
                    if (item.ship_status == 3) {
                      item.status_text = "已发货";
                    }
                    if (item.ship_status == 4) {
                      item.status_text = "已送达";
                    }
                  }
                }
                if (item.status == 2) {
                  item.status_text = "已完成";
                }
                if (item.status == 3) {
                  item.status_text = "已取消";
                }
              } else {
                if (
                  item.order_type == 1 ||
                  item.order_type == 3 ||
                  item.order_type == 4 ||
                  item.order_type == 10 ||
                  item.order_type == 11 ||
                  item.order_type == 12
                ) {
                  if (item.status == 1 && item.pay_status == 1) {
                    item.status_text = "待支付";
                  }
                  if (item.status == 1 && item.pay_status == 4) {
                    item.status_text = "部分退款";
                  }
                  if (item.status == 1 && item.pay_status == 5) {
                    item.status_text = "全部退款";
                  }
                  if (
                    item.status == 1 &&
                    item.pay_status == 2 &&
                    item.ship_status == 1
                  ) {
                    item.status_text = "待发货";
                  }
                  if (
                    item.status == 1 &&
                    item.pay_status == 2 &&
                    item.ship_status == 2
                  ) {
                    item.status_text = "已发货";
                  }
                  if (
                    item.status == 1 &&
                    item.pay_status == 2 &&
                    item.ship_status == 3 &&
                    item.confirm == 1
                  ) {
                    item.status_text = "已送达/未收货";
                  }
                  if (
                    item.status == 1 &&
                    item.pay_status == 2 &&
                    item.ship_status == 3 &&
                    item.confirm == 2
                  ) {
                    item.status_text = "已送达/已收货";
                  }
                  if (item.status == 2) {
                    item.status_text = "已完成";
                  }
                  if (item.status == 3) {
                    item.status_text = "已取消";
                  }
                } else if (item.order_type == 5) {
                  if (item.status == 1) {
                    item.status_text = "正常";
                  }
                  if (item.status == 2) {
                    item.status_text = "完成";
                  }
                  if (item.status == 3) {
                    item.status_text = "取消";
                  }
                } else if (item.order_type == 2) {
                  if (item.status == 1) {
                    // if (item.order_id == "031113210632887") {
                    //   console.log(item);
                    // }
                    if (item.pay_status == 1) {
                      item.status_text = "未支付";
                    }
                    if (item.pay_status == 6 && item.maint[0].status == 0) {
                      item.status_text = "勘察员未接单";
                    }
                    if (item.pay_status == 6 && item.maint[0].status == 1) {
                      item.status_text = "勘察员已接单";
                    }

                    if (
                      item.pay_status == 6 &&
                      item.maint[0].maintenance_status == 1 &&
                      (item.maint[0].status == 1 || item.maint[0].status == 2)
                    ) {
                      if (item.authority_user_status == 1) {
                        // 未上门
                        item.status_text = "勘察员已接单";
                      } else {
                        // 已上门
                        item.status_text = "勘察中";
                      }
                      if (item.maint[0].status == 2) {
                        item.status_text = "材料待付款";
                      }
                    }
                    if (
                      item.pay_status == 2 &&
                      item.maint[0].maintenance_status == 1 &&
                      (item.maint[0].status == 1 || item.maint[0].status == 2)
                    ) {
                      item.status_text = "已付款";
                    }

                    if (
                      item.pay_status == 2 &&
                      item.maint[0].maintenance_status == 2
                    ) {
                      item.status_text = "等待维修";
                      if (item.maintenance_user_status == 1) {
                        item.status_text = "等待维修";
                      }
                      if (item.maintenance_user_status == 2) {
                        item.status_text = "维修中";
                      }
                    }
                    if (
                      item.maint[0].maintenance_status == 3 &&
                      item.confirm == 1
                    ) {
                      item.status_text = "待验收";
                    }
                    if (item.confirm == 2 && item.is_comment == 1) {
                      item.status_text = "待评价";
                    }
                    if (item.confirm == 3) {
                      item.status_text = "验收不通过";
                    }
                  }
                  if (item.status == 2) {
                    item.status_text = "已完成";
                  }
                  if (item.status == 3) {
                    item.status_text = "已取消";
                  }
                }
              }
              item.allPirce =
                Number(item.order_amount).toFixed(2) +
                Number(item.sender_amount).toFixed(2);
            }
          });
          // this.tableData = list;
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        }
      });
    },
    onSubmit() {
      this.page1 = 1;
      this.goodsOrder();
    },
    handleSure() {
      let data = {
        customer_id: this.CustomerService_id,
        customer_notes: this.remarkText,
      };
      getMainCustomerRemark(
        sessionStorage.getItem("token"),
        this.order_id,
        JSON.stringify(data)
      ).then((res) => {
        console.log(res);
        if (res.data.status == true) {
          this.$message.success(res.data.msg);
          this.dialogVisibleRemark = false;
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          if (res.data.msg == "此账号没有权限") {
            this.$message.error(res.data.msg);
            this.loading = false;
          }
          let timer = setTimeout(() => {
            this.$message.error(res.data.msg);
          }, 5000);
        }
      });
    },
    handleBack() {
      this.remarkText = "";
      this.dialogVisibleRemark = false;
    },
    onLoad() {
      if (!this.isScroll) {
        this.getKefu(
          sessionStorage.getItem("token"),
          this.list_token,
          this.page,
          this.pageSize
        );
        this.page++;
      }
    },

    rightClick(e, k) {
      this.$nextTick(() => {
        this.userList.forEach((item, index) => {
          this.$refs["popover-" + index][0].doClose();
          if (index == k) {
            item.visible = !item.visible;
          } else {
            item.visible = false;
          }
          // console.log(item,123123)
          if (item.visible) {
            this.$refs["popover-" + index][0].doShow();
          }
        });
        // this.$refs["popover-" + k][0].doShow()
      });
    },
    closeTnkuang() {},
    moveEnd() {
      this.floatBtnFlag = false;
      // console.log(`moveEnd`);
      document.onmousemove = null;
      this.resetFloatBtnLocation();
    },
    moveStart(e) {
      console.log("moveStart", event.button);
      if (event.button == 2) return;
      let floatBtn = this.$refs.floatBtn; //获取目标元素
      const { left, top } = this.transform;
      let dx = e.clientX - left;
      let dy = e.clientY - top;
      this.moveFlags = true;
      (this.clickFlags = true),
        (document.onmousemove = async (e) => {
          this.moveFlags = true;
          this.clickFlags = false;
          let bodyWidth = document.body.clientWidth;
          let bodyHeight = document.body.clientHeight;
          let moveMaxHeight = bodyHeight - 30;
          let moveMaxWidth = bodyWidth - floatBtn.offsetWidth / 2 + dx;
          let nx = e.clientX;
          let ny = e.clientY;
          let xPum = (nx > moveMaxWidth ? moveMaxWidth : nx) - dx;
          let yPum = (ny > moveMaxHeight ? moveMaxHeight : ny) - dy;
          await this.$nextTick();
          this.generateTransform({
            left: xPum > -25 ? xPum : -25,
            top: yPum > 0 ? yPum : 0,
          });
        });
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
        this.clickFlags = true;
        this.moveEnd();
      };
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      this.goodsOrder();
    },
    //页数
    handleCurrentChange(val) {
      this.page1 = val;
      this.goodsOrder();
    },
    showButton() {
      // console.log('mouse-over');
      if (this.moveFlags) return;
      this.hoverFlag = true;
      const { left, top } = this.transform;
      if (left > 0 && left < -25) return;
      let bodyWidth = document.body.clientWidth;
      if (left < bodyWidth / 2) {
        this.generateTransform({ top: top, left: 10 });
      } else {
        this.generateTransform({ top: top, left: bodyWidth - 60 });
      }
    },
    hideButton() {
      // console.log('mouse-leave');
      //移动过程中不复位 按钮；
      if (this.moveFlags) return;
      this.resetFloatBtnLocation();
    },
    resetFloatBtnLocation() {
      // console.log('------reset');
      let floatBtn = this.$refs.floatBtn; //获取目标元素
      if (!floatBtn) return;
      let bodyWidth = document.body.clientWidth;
      const { left, top } = this.transform;
      if (left < bodyWidth / 2) {
        this.generateTransform({ top, left: `-20` });
      } else {
        this.generateTransform({ top, left: bodyWidth - 30 });
      }
    },
    generateTransform({ top, left }) {
      let floatBtn = this.$refs.floatBtn; //获取目标元素
      if (!floatBtn) return;
      this.$set(this.transform, "left", left);
      this.$set(this.transform, "top", top);
    },
    async toggleMenu() {
      console.log(this.clickFlags, this.userList);
      if (!this.clickFlags) return;
      console.warn("点击");
      this.dialogVisible = true;
    },
    getsrcList() {
      console.log(this.activeObj);
      if (this.activeObj.message) {
        this.activeObj.message.forEach((item) => {
          if (item.type == 2) {
            this.srcList.push(this.imgHeader + item.message);
          }
        });
      }
    },
    websocketsend(msg) {
      this.$bus.$emit("websocketsend", msg);
    },
    getMap(list) {
      let map = new Map();
      for (let i of list) {
        if (!map.has(i.id)) {
          map.set(i.id, i);
        }
      }
      list = [...map.values()];
      console.log(list);
      return list;
    },

    getKefu(token, list_token, page, pageSize) {
      getKefu(token, list_token, page, pageSize)
        .then((res) => {
          if (res.data.status) {
            this.userList = this.userList.concat(res.data.data);
            // console.log("list", this.getMap(this.userList));
            console.log("去重前", this.userList);
            this.userList = this.getMap(this.userList);

            // let list = this.userList
            let list = [];
            // list.filter(item=>{return item.userid == this.kefuId})
            console.log("去重后", list);
            if (this.activeObj && this.activeObj.id) {
              this.active = this.userList.findIndex((item) => {
                return item.id == this.activeObj.id;
              });
            } else {
              this.active = this.userList.findIndex((item) => {
                return (
                  item.anotherid == sessionStorage.getItem("seller_user_id")
                );
              });
            }

            console.log(this.active, this.activeObj);
            if (this.chat_id) {
              this.active = list.findIndex((item) => {
                return (
                  item.anotherid == sessionStorage.getItem("seller_user_id")
                );
              });
            }
            console.log(list, this.userIds, this.chat_id, this.active);
            this.activeObj = this.userList[this.active];
            if (this.userIds != 0 && this.userIds) {
              // if (!this.userIds) {
              this.userIds = this.activeObj ? this.activeObj.userid : 0;
              console.log(this.userIds, "yonghuliebiao");
              this.getCustomerInformation();
            }
            console.log(this.activeObj);
            this.getsrcList();
            this.goodsOrder();
            let now = new Date(this.get_endtime()).getTime();
            let yesterday = new Date(this.getlastDay()).getTime();
            const TIME = 24 * 60 * 60 * 1000;
            console.log(this.userList.length);
            if (this.userList.length > 0) {
              this.userList[this.active].unreads = "0";
            }
            this.$nextTick(() => {
              if (this.scrollFlag) {
                this.scrollFlag = false;
                setTimeout(() => {
                  let msg = {
                    type: "u_yidu",
                    user_id: sessionStorage.getItem("seller_user_id"), //我的id
                    chat_id: this.activeObj.chatid,
                    is_kf: 2,
                  };
                  // this.$parent.websocketsend(JSON.stringify(msg));
                  // this.$parent.$parent.websocketsend(JSON.stringify(msg));
                  if (this.dialogVisible) {
                    this.websocketsend(JSON.stringify(msg));
                  }
                  this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
                  // console.log(this.$refs.scroll.scrollTop)
                }, 200);
              }
            });
            this.userList.forEach((item) => {
              item.visible = false;
              if (now - new Date(item.time).getTime() < TIME) {
                // 今天
                item.time_text = item.time.split(" ")[1];
              } else if (yesterday - new Date(item.time).getTime() < TIME) {
                item.time_text = "昨天";
              } else {
                item.time_text = item.time.split(" ")[0];
              }
            });
            if (res.data.data.length == 0) {
              this.isScroll = true;
            }

            // userIds", "listToken
          } else {
            if (res.data.msg == "请重新登录") {
              this.$router.push("/login");
            }
            console.log(this.userList);
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取当日23：59：59时间
    get_endtime() {
      var time_end = new Date(
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
      );
      return time_end;
    },
    getlastDay() {
      var time_end = new Date(
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1 -
          24 * 60 * 60 * 1000
      );
      return time_end;
    },

    choose(e) {
      // console.log("aaa", e);
      // console.log("parrent", this.$parent.$parent);

      console.log(this.userList[e]);
      // ?'hui':'zhengchang'
      this.$refs["popover-" + e][0].doClose();
      if (this.active == e) {
        return;
      }
      if (
        this.userList[e].anotherid != this.kefuId &&
        this.userList[e].cus_info.is_online == 1
      ) {
        return;
      }
      console.log("选中", this.userList[e].anotherid);
      // console.log("websocketsend", this.websocketsend());
      this.srcList = [];
      this.active = e;
      this.activeObj = this.userList[e];
      // console.log("this.activeObj ", this.activeObj);
      this.userIds = this.activeObj.userid;
      this.getCustomerInformation();
      this.goodsOrder();
      this.getsrcList();
      setTimeout(() => {
        this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
        this.userList[e].unreads = "0";
      }, 200);

      // 已读
      let msg = {
        type: "u_yidu",
        user_id: sessionStorage.getItem("seller_user_id"), //我的id
        chat_id: this.activeObj.chatid,
        is_kf: 2,
      };
      if (this.activeObj.is_show) {
        let msg = {
          type: "u_yidu",
          user_id: this.activeObj.is_show, //我的id
          chat_id: this.activeObj.chatid,
          is_kf: 2,
        };
      }
      // this.$parent.websocketsend(JSON.stringify(msg));
      // this.$parent.$parent.websocketsend(JSON.stringify(msg));
      if (this.dialogVisible) {
        this.websocketsend(JSON.stringify(msg));
      }
    },
    scrollToBottom() {
      if (!this.scrollFlag) {
        this.scrollFlag = true;
      }
    },

    handleRemove() {},
    //这是我自定义的移除事件
    handleClosec(i) {
      this.fileList.splice(i, 1); //删除上传的文件
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    imgLoad() {
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.$refs.scroll) {
            this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
            // console.log(this.$refs.scroll.scrollTop)
          }
        }, 120);
      });
    },
    //上传文件的事件
    uploadFile(item) {
      this.$message("文件上传中........");
      //上传文件的需要formdata类型;所以要转
      uploadFilec(item.file).then((res) => {
        let list_id = -1;
        if (this.activeObj.message.length > 0) {
          list_id =
            this.activeObj.message[this.activeObj.message.length - 1].id;
        } else {
          list_id = -1;
        }
        if (res.data.status != false || res.data.id != null) {
          // console.log(res.data.data)
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          let type = res.data.data.saveurl.split(".")[1];
          if (res.data.status) {
            if (type == "png" || type == "jpg" || type == "jpeg") {
              let msg = {
                type: "u_fasong",
                types: 2,
                message: res.data.data.saveurl,
                user_id: this.activeObj.anotherid, //我的id
                uid: this.activeObj.userid, //我要发送给目标的id
                chat_id: this.activeObj.chatid,
                list_id: list_id,
                house_type: 1,
                user_type: 2,
                is_nill: 1,
                is_kf: 2,
                timestamp: Math.floor(new Date().getTime() / 1000),
              };
              // if(this.activeObj.is_show){
              //   msg.recid = this.activeObj.is_show
              // }
              // this.$parent.websocketsend(JSON.stringify(msg));
              // this.$parent.$parent.websocketsend(JSON.stringify(msg));
              this.websocketsend(JSON.stringify(msg));
              this.activeObj.message.push({
                chatid: this.activeObj.chatid,
                id:
                  this.activeObj.message[this.activeObj.message.length - 1].id +
                  1,
                isdel: null,
                isdels: null,
                message: res.data.data.saveurl,
                sendtime: this.getNowTime(),
                timestamp: Math.floor(new Date().getTime() / 1000),
                type: 2,
                userid: sessionStorage.getItem("seller_user_id"), //我的id
                house_type: 1,
                user_type: 2,
              });
            } else {
              let msg = {
                type: "u_fasong",
                types: 4,
                message: res.data.data.saveurl,
                user_id: this.activeObj.anotherid, //我的id
                uid: this.activeObj.userid, //我要发送给目标的id
                chat_id: this.activeObj.chatid,
                list_id: list_id,
                house_type: 1,
                user_type: 2,
                is_nill: 1,
                is_kf: 2,
                timestamp: Math.floor(new Date().getTime() / 1000),
              };
              // if(this.activeObj.is_show){
              //   msg.recid = this.activeObj.is_show
              // }
              // this.$parent.websocketsend(JSON.stringify(msg));
              // this.$parent.$parent.websocketsend(JSON.stringify(msg));
              this.websocketsend(JSON.stringify(msg));
              this.activeObj.message.push({
                chatid: this.activeObj.chatid,
                id:
                  this.activeObj.message[this.activeObj.message.length - 1].id +
                  1,
                isdel: null,
                isdels: null,
                message: res.data.data.saveurl,
                sendtime: this.getNowTime(),
                timestamp: Math.floor(new Date().getTime() / 1000),
                type: 4,
                userid: sessionStorage.getItem("seller_user_id"), //我的id
                house_type: 1,
                user_type: 2,
              });
              this.$nextTick(() => {
                setTimeout(() => {
                  if (this.$refs.scroll) {
                    this.$refs.scroll.scrollTop =
                      this.$refs.scroll.scrollHeight;
                    // console.log(this.$refs.scroll.scrollTop)
                  }
                }, 120);
              });
            }
            this.chongzhidiyi();
          }
          // this.formLabelAlign.atavar = res.data.data.weburl
          // this.formLabelAlign.avatar = res.data.data.saveurl
          this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
          let i = this.fileList.indexOf(item.file);
          this.handleSuccess();
        }
      });
    },
    //上传成功后的回调tofixed
    handleSuccess() {
      // this.$message({
      //   message: '上传成功',
      //   type: 'success'
      // });
      this.handleClosec();
    },
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    async getCustomerInformation() {
      // console.log("666");
      console.log(this.userIds, "xinxi,userIds");
      let res = await getMainCustomerInformation(
        sessionStorage.getItem("token"),
        this.userIds,
        this.kefuId
      );
      if (res.status) {
        this.consumptionData.avatar = res.data.data.avatar;
        this.consumptionData.id = res.data.data.id;
        this.consumptionData.nickname = res.data.data.nickname;
        this.consumptionData.mobile = res.data.data.mobile;
        this.consumptionData.OrderQuantity = res.data.data.res.count;
        this.consumptionData.ConsumptionAmount = res.data.data.res.payed;
        this.consumptionData.CustomerUnitPrice = res.data.data.res.avg_price;
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
  },
  watch: {
    clientWidth(newVal, oldVal) {
      this.clientWidth = newVal;
      this.transform.left = this.clientWidth - 40;
      // console.log(newVal);//浏览器窗口变化时，打印宽度。
    },
    clientHeight(newVal, oldVal) {
      this.clientHeight = newVal;
      this.transform.top = this.clientHeight - 300;
      // console.log(newVal);//浏览器窗口变化时，打印宽度。
    },
    active(n, o) {
      // 已读
    },
    dialogVisible(n, o) {
      if (n == false) {
        window.addEventListener("onmessageClose", (e) => {
          this.dialogTtile = "连接断开";
          console.log(e, "连接断开");

          window.removeEventListener("onmessageWS");
        });

        this.activeObj = {};
        this.popovervisible = false;
        this.userList.forEach((item, index) => {
          console.log(this.$refs["popover-" + index]);
          this.$refs["popover-" + index]
            ? this.$refs["popover-" + index][0].doClose()
            : false;
        });
      } else {
        this.floatBtnFlag = false;

        console.log(sessionStorage.getItem("token"));
        getKefu(sessionStorage.getItem("token"), this.list_token, 1, 15).then(
          (res) => {
            console.log(res, "=ssssssss", "dialogVisible");
            console.log(
              this.userIds,
              this.listToken,
              "llllllllllllllllllllllllllllllllll222"
            );

            if (res.data.status) {
              this.userList = res.data.data;
              console.log(this.activeObj);
              let obj = this.activeObj;
              // 首次进入左侧显示 active
              // this.userList[e].userid != this.kefuId&&this.userList[e].cus_info.is_online==1
              let list = res.data.data;
              console.log(this.userList, "this.userList");
              console.log(
                list,
                "this.userListlistlistlistlistlistlistlistli=stlist"
              );
              console.log(
                this.activeObj,
                "activeObjactiveObjactiveObjactiveObjactiveObj.activeObjactiveObjactiveObj"
              );
              if (this.activeObj && this.activeObj.id) {
                this.active = list.findIndex((item) => {
                  return item.id == this.activeObj.id;
                });
                this.userIds = this.activeObj.userid;
              } else {
                this.active = list.findIndex((item) => {
                  return (
                    item.anotherid == sessionStorage.getItem("seller_user_id")
                  );
                });
                this.active == -1 ? 0 : list[this.active].userid;
              }
              this.activeObj = this.active != -1 ? list[this.active] : {};
              this.userIds = this.active != -1 ? list[this.active].userid : 0;
              console.log(list, this.active, this.activeObj);
              if (list.length > 0) {
                let msg = {
                  type: "u_yidu",
                  user_id: sessionStorage.getItem("seller_user_id"), //我的id
                  chat_id: this.activeObj.chatid,
                  is_kf: 2,
                };
                // console.log(this.$parent);
                // this.$parent.websocketsend(JSON.stringify(msg));
                // this.$parent.$parent.websocketsend(JSON.stringify(msg));
                if (this.dialogVisible) {
                  this.websocketsend(JSON.stringify(msg));
                }
                this.popovervisible1 = false;
                if (this.activeObj.unread <= 0) {
                  this.yiduFlag = true;
                } else {
                  this.yiduFlag = false;
                }
              }

              // console.log(this.$parent.websocketsend, "pp");
              if (this.activeObj) {
                this.getsrcList();
              }
              let now = new Date(this.get_endtime()).getTime();
              let yesterday = new Date(this.getlastDay()).getTime();
              const TIME = 24 * 60 * 60 * 1000;
              this.userList.forEach((item) => {
                item.visible = false;
                if (now - new Date(item.time).getTime() < TIME) {
                  // 今天
                  item.time_text = item.time.split(" ")[1];
                } else if (yesterday - new Date(item.time).getTime() < TIME) {
                  item.time_text = "昨天";
                } else {
                  item.time_text = item.time.split(" ")[0];
                }
              });
              console.log(this.$refs);
              this.$nextTick(() => {
                if (this.$refs.scroll) {
                  this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
                }
              });
              if (this.listToken) {
                //如果从历史会话进入
                let list2 = [];
                console.log(
                  this.userIds,
                  this.userList,
                  "如果从历史会话进入",
                  this.userList.filter((item) => {
                    return item.anotherid == this.userIds;
                  })
                );
                // this.userList.filter(item=>{return item.anotherid == this.userIds}).find()
                if (this.userIds) {
                  console.log(22, "]]");
                  this.userList.forEach((item) => {
                    if (item.anotherid == this.kefuId) {
                      list2.push(item);
                    } else {
                      if (item.cus_info.is_online == 2) {
                        list2.push(item);
                      }
                    }
                  });
                  this.active = this.userList.findIndex((item) => {
                    return (
                      item.anotherid == sessionStorage.getItem("seller_user_id")
                    );
                  });
                  console.log(this.userList, list2);
                  console.log(
                    this.userList.findIndex((item) => {
                      return item.id == list2.length > 0 ? list2[0].id : 0;
                    })
                  );
                  this.active = this.userList.findIndex((item) => {
                    return (
                      item.anotherid == sessionStorage.getItem("seller_user_id")
                    );
                  });
                }
              }
            }
          }
        );
      }
    },
    activeObj: {
      handler(val, oldVal) {
        console.log(val, "val");
        if (val) {
          if (this.activeObj.message) {
            this.activeObj.message.forEach((item) => {
              if (item.type == 5) {
                if (!item.message.name) {
                  let obj = JSON.parse(item.message);
                  item.message = { name: obj };
                }
              }
            });
          }
        }
      },
      deep: true,
    },
    userList: {
      handler(val, oldVal) {
        // console.error(val,oldVal,this.listToTree(this.userList),'=======');
      },
      deep: true,
    },
  },
  created() {
    let that = this;
    this.getCustomerInformation();
    this.getHousePropertyTags();
    window.onresize = () => {
      return (() => {
        window.clientWidth = document.body.clientWidth;
        window.clientHeight = document.body.clientHeight;
        that.clientWidth = window.clientWidth;
        that.clientHeight = window.clientHeight;
      })();
    };
  },
  mounted() {
    // this.$nextTick(function () {
    //   this.$on("toggleMenu", function () {
    //     this.dialogVisible = true;
    //   });
    // });
    // console.log("user_id", this.userIds);
    this.scrollToBottom();

    this.list_token = this.listToken == undefined ? "" : this.listToken;
    console.log("list_token", this.list_token);
    this.getlist();
    window.addEventListener("onmessageWS", (e) => {
      console.log(e, "window,AEe");
      this.dialogTtile = "在线";
      if (
        e.detail.data != "pong" &&
        e.detail.data != "Hello" &&
        e.detail.data.split(" ")[1] != "退出了"
      ) {
        // this.getlist()
        console.log(e.detail.data, JSON.parse(e.detail.data), "接受消息");
        if (JSON.parse(e.detail.data).sendtime) {
          this.popovervisible1 = true;
          // '1=聊天  2=图片 3=表情  4=视频',
          this.tooltipTitle = JSON.parse(e.detail.data).message;
          if (JSON.parse(e.detail.data).type == 2) {
            this.tooltipTitle = "[图片]";
          }
          if (JSON.parse(e.detail.data).type == 3) {
            this.tooltipTitle = "[表情]";
          }
          if (JSON.parse(e.detail.data).type == 4) {
            this.tooltipTitle = "[视频]";
          }
          if (JSON.parse(e.detail.data).type == 5) {
            this.tooltipTitle = "[位置]";
          }
          this.userList.forEach((item) => {
            // 聊天表有此聊天
            console.log(item);
            if (item.chatid == JSON.parse(e.detail.data).chatid) {
              console.log(this.activeObj, "this.activeObj");
              // 是不当前id
              if (JSON.parse(e.detail.data).chatid == this.activeObj.chatid) {
                // 是不是自己发的

                if (this.activeObj.chatid == item.chatid) {
                  // 如果是自己发的消息那就替换掉
                  if (
                    JSON.parse(e.detail.data).userid ==
                    sessionStorage.getItem("seller_user_id")
                  ) {
                    this.activeObj.message[this.activeObj.message.length - 1] =
                      JSON.parse(e.detail.data);
                    console.log(this.activeObj, "this.activeObj=-213");
                  } else {
                    // 选择的id和发来的id一样  我选择的用户给我发消息  处理操作
                    this.activeObj.message.push(JSON.parse(e.detail.data));
                    if (!this.dialogVisible) {
                      this.floatBtnFlag = true;
                    }
                    if (this.dialogVisible) {
                      let msg = {
                        type: "u_yidu",
                        user_id: sessionStorage.getItem("seller_user_id"), //我的id
                        chat_id: this.activeObj.chatid,
                        is_kf: 2,
                      };
                      // this.$parent.websocketsend(JSON.stringify(msg));
                      // this.$parent.$parent.websocketsend(JSON.stringify(msg));
                      if (this.dialogVisible) {
                        this.websocketsend(JSON.stringify(msg));
                      }
                    }
                  }
                }
                this.$nextTick(() => {
                  if (this.$refs.scroll) {
                    this.$refs.scroll.scrollTop =
                      this.$refs.scroll.scrollHeight;
                  }
                });

                console.log(this.activeObj, this.dialogVisible, "=====");
                let msg2 = {
                  type: "u_yidu",
                  user_id: sessionStorage.getItem("seller_user_id"), //我的id
                  chat_id: this.activeObj.chatid,
                  is_kf: 2,
                };
                // this.$parent.websocketsend(JSON.stringify(msg));
                // this.$parent.$parent.websocketsend(JSON.stringify(msg));
                if (this.dialogVisible) {
                  this.websocketsend(JSON.stringify(msg2));
                }
              } else {
                this.userList.forEach((item) => {
                  if (item.chatid == JSON.parse(e.detail.data).chatid) {
                    item.unreads = Number(item.unreads) + 1;
                    item.message.push(JSON.parse(e.detail.data));
                  }
                });
              }
            } else {
              // 聊天表没有此聊天
              let obj = this.activeObj;
              this.getKefu(
                sessionStorage.getItem("token"),
                this.list_token,
                this.page,
                this.pageSize
              );
            }
          });

          getKefu(sessionStorage.getItem("token"), this.list_token, 1, 15).then(
            (res) => {
              console.log(
                res,
                "=ssssssssJIESHOUXIAOXIXIXIXIXIXIXIXIXIXIXIXIXIXIXIXIXIXXIXII"
              );
              if (res.data.status) {
                this.userList = res.data.data;
                let obj = this.activeObj;
                if (this.activeObj && this.activeObj.id) {
                  this.active = this.userList.findIndex((item) => {
                    return item.id == this.activeObj.id;
                  });
                } else {
                  this.active = this.userList.findIndex((item) => {
                    return (
                      item.anotherid == sessionStorage.getItem("seller_user_id")
                    );
                  });
                }
                this.activeObj =
                  this.active != -1 ? this.userList[this.active] : {};
                console.log(
                  this.active,
                  obj,
                  this.activeObj,
                  "=ssssssssJIESHOUXIAOXIXIXIXIXIXIXIXIXIXIXIXIXIXIXIXIXIXXIXII"
                );
                this.getsrcList();
                let now = new Date(this.get_endtime()).getTime();
                let yesterday = new Date(this.getlastDay()).getTime();
                const TIME = 24 * 60 * 60 * 1000;
                this.userList.forEach((item) => {
                  console.log(item);
                  item.visible = false;
                  if (now - new Date(item.time).getTime() < TIME) {
                    // 今天
                    item.time_text = item.time.split(" ")[1];
                  } else if (yesterday - new Date(item.time).getTime() < TIME) {
                    item.time_text = "昨天";
                  } else {
                    item.time_text = item.time.split(" ")[0];
                  }
                });
              }
            }
          );
        } else {
          this.yiduFlag = true;
        }
      } else {
      }
    });
  },
};
</script>
<style scoped>
.shanshuo {
  animation: twinkle 0.5s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
  }
}

.status {
  position: relative;
  float: right;
  width: 100%;
  /* margin: 20px 0; */
  margin-bottom: 10px;
  text-align: center;
}

.status .span {
  font-size: 12px;
  display: inline-block;
  background: #ccc;
  color: #fff;
  line-height: 12px;
  border-radius: 5px;
  padding: 3px 10px;
}

.unread {
  width: 10px;
  height: 10px;
  /*background: red;*/
  border-radius: 50%;
  position: absolute;
  right: 10%;
  bottom: 50%;
}

.modal-body {
  width: 100%;
  display: flex;
  box-sizing: border-box;
}

.kefu-left {
  flex: 4;
  height: 650px;
  border: 1px solid #f4f4f4;
  border-right: none;
  word-wrap: break-word;
  overflow: auto;
}

.kefu-center {
  flex: 8;
  height: 650px;
  border: 1px solid #f4f4f4;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  transition: all 1s;
}

.fade-leave-to {
  opcaity: 0;
}

.floating-window {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  /*width: 100vw;*/
  /*height: 100vh;*/
  /*overflow: hidden;*/
  /*pointer-events: none;*/
}

.floatBtn {
  position: absolute;
  z-index: 1000;
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: #409eff;
  text-align: center;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.iconc {
  font-size: 30px;
  -webkit-user-drag: none;
  line-height: 40px;
  color: #fff;
}

.text {
  margin-top: 5px;
}

.infinite-list-item {
  margin: 5px;
  padding: 12px 6% 16px;
  display: flex;
  position: relative;
  cursor: pointer;

  /*border: 1px solid  rgba(0, 0, 0, .04);*/
}

.infinite-list .hui .infinite-list-item {
  background: #ccc;
}

.infinite-list-item:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 80%;
  height: 1px;
  content: "";
  background: rgba(0, 0, 0, 0.04);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.infoRight .title {
  display: flex;
  justify-content: space-between;
}

.infoRight .message {
  height: 24px;
  line-height: 24px;
  width: 80%;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.infoRight {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.active {
  background: #00b0ff;
}

.active .titlename,
.active .time,
.active .message {
  color: white;
}

.kefu-left::-webkit-scrollbar {
  width: 4px;
  border-radius: 2px;
}

.kefu-center .top {
  height: 20px;
  line-height: 20px;
  padding: 15px 29px;
  background-color: #eceff1;
  font-size: 22px;
}

.chatHistory {
  display: flex;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  height: calc(100% - 158px);
  justify-content: flex-end;
  flex-direction: column;
}

.bubbleBox {
  margin-bottom: 8px;
}

.bubble {
  font-size: 16px;
  position: relative;
  display: inline-block;
  clear: both;
  margin-bottom: 8px;
  padding: 13px 14px;
  vertical-align: top;
  border-radius: 5px;
  max-width: 86%;
}

.chat_scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.me {
  float: right;
  background-color: #00b0ff;
  color: #fff;
}

.you {
  float: left;
  background-color: #eceff1;
  color: #1a1a1a;
}

.me:before {
  right: -3px;
  background-color: #00b0ff;
  position: absolute;
  top: 19px;
  display: block;
  width: 8px;
  height: 6px;
  content: "\00a0";
  -webkit-transform: rotate(29deg) skew(-35deg);
  transform: rotate(29deg) skew(-35deg);
}

.you:before {
  left: -3px;
  background-color: #eceff1;
  position: absolute;
  top: 19px;
  display: block;
  width: 8px;
  height: 6px;
  content: "\00a0";
  -webkit-transform: rotate(29deg) skew(-35deg);
  transform: rotate(29deg) skew(-35deg);
}

.b {
  text-align: center;
  width: 50%;
  margin: 0 auto;
  max-width: 100%;
  padding: 10px;
  float: none;
  display: block;
}

.b:before {
  display: none;
}

.bubble .image {
  max-width: 300px !important;
  height: auto !important;
  vertical-align: bottom;
}

.bubble .video {
  max-width: 300px !important;
}

.write {
  height: 100px;
  padding: 8px;
  display: block;
  margin: 0 auto;
  padding-left: 8px;
  border-top: 1px solid #f4f4f4;
  box-sizing: border-box;
}

.write_top {
  padding-bottom: 8px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
  vertical-align: middle;
  cursor: pointer;
  margin-right: 6px;
  font-size: 20px;
}

.select_file {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  position: relative;
  margin-right: 6px;
  cursor: pointer;
}

#chatfile {
  filter: alpha(opacity=0);
  opacity: 0;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  z-index: 2;
}

.write_top_span {
  display: inline-block;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  margin-left: 10px;
  vertical-align: middle;
  color: #999;
}

/deep/.kefu_message .el-textarea__inner {
  resize: none;
  outline: none;
  border: none;
}

.kefu_message {
  font-size: 16px;
  float: left;
  width: 100%;
  height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  padding-left: 2px;
  white-space: pre-wrap;
  word-break: normal;
  color: #1a1a1a;
  outline: none;
  background-color: #fff;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
}

.emoji {
  cursor: pointer;
  padding: 10px;
  font-size: 27px;
}

/deep/.upload-demo .el-upload--text {
  color: #606266;
  width: auto;
  height: auto;
  border: none;
}

.delete {
  text-align: center;
  cursor: pointer;
}

.delete:hover {
  background: #f2f6fc;
}

.unreadBox {
  text-align: right;
  margin: 10px;
}

/deep/.popver .el-popover {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bubble .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  cursor: pointer;
  padding: 13px 14px 8px 14px;
}

.bubble .address {
  max-width: 260px;
  color: #a8a8a8;
  white-space: nowrap;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 0 0 8px 14px;
}

.weizhi .bubble {
  padding: 0;
  cursor: pointer;
}

/* 客户资料的样式 */
.kefu-right {
  display: flex;
  flex-direction: column;
  width: 500px;
  border: 1px solid #f4f4f4;
  margin-left: 10px;
  padding: 10px;
}

.kefu-right .head {
  display: flex;
  justify-content: space-between;
  font-size: 26px;
  font-weight: 700;
  height: 60px;
  align-items: center;
  justify-items: center;
  /* border-bottom: 1px solid gray; */
  padding: 0 40px;
}

.kefu-right .head span {
  cursor: pointer;
  border-bottom: 1px solid gray;
  text-align: center;
  width: 40%;
  padding-bottom: 10px;
}

.headTrue {
  /* color: #f96422; */
  width: 10px;
  /* height: 5px; */
  border-bottom: 3px solid #f96422 !important;
  box-sizing: border-box;
  /* background-color: #f96422; */
}

.kefu-right .center {
  display: flex;
  align-items: center;
  height: 100px;
  border-bottom: 2px solid gray;
  padding-left: 20px;
  font-size: 18px;
}

.kefu-right .center .el-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.kefu-right .center .info {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kefu-right .xiaofei {
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  /* border-bottom: 1px solid #000; */
  padding-left: 20px;
}

.kefu-right .footer {
  display: flex;
  justify-content: space-around;
}

.kefu-right .footer div {
  display: flex;
  font-size: 18px;
  height: 60px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* 订单列表的样式 */
.khzl,
.ddlb {
  display: flex;
  flex-direction: column;
}

.ddlb {
  padding: 10px;
  font-size: 18px;
  height: 518px;
  overflow: scroll;
  /* border: 1px solid red; */
}

.ddlb .libox {
  border-bottom: 0.5px solid #666666;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.ddlb .el-image {
  width: 120px;
  height: 120px;
  margin-right: 20px;
}

.ddlb .state {
  display: flex;
  /* font-size: 18px; */
  height: 30px;
  line-height: 20px;
  /* align-items: center; */
  justify-content: space-between;
}

.ddlb .shops {
  display: flex;
  position: relative;
}

.shops .col {
  /* height: 120px; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* margin-left: 20px; */
  /* font-size: 18px; */
}

.shops #col2 {
  position: absolute;
  right: 40px;
}

.ddlb .time {
  /* font-size: 18px; */
  padding-top: 10px;
  margin-bottom: 10px;
}

.ddlb .btn {
  /* padding-top: 10px; */
  padding-left: 40%;
}

.btn button,
.footerBox button {
  width: 76px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  font-size: 14px;
  color: #999999;
  background-color: #fff;
  border-radius: 50px;
  margin-left: 5px;
  border: 1px solid #999999;
}

.spanMag {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 查看备注弹出层 */
.beizhu {
  min-height: 300px;
  max-height: 600px;
  box-sizing: border-box;
  overflow: scroll;
}

.libox {
  width: 98%;
  font-size: 18px;
  margin-bottom: 30px;
}

.libox .kefu {
  margin-bottom: 5px;
}

.kefu span {
  margin-right: 20px;
}

.libox .wenzi {
  width: 96%;
  min-height: 60px;
  border: 1px solid black;
  padding: 10px;
  overflow: scroll;
}

.infinite-list .hui .infinite-list-item {
  background: #ccc;
}

.infinite-list .hui .infinite-list-item .titlename,
.infinite-list .hui .infinite-list-item .time,
.infinite-list .hui .infinite-list-item .message {
  color: #a2a2a2 !important;
}

.infinite-list .hui .infinite-list-item .leftAvatar {
  opacity: 0.5;
}
/* 房地产订单列表 */
.houseUl {
  border-bottom: 0.5px solid #666666;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
}
.topBox {
  display: flex;
  height: 30px;
  line-height: 20px;
  justify-content: space-between;
}
.centerBox {
  display: flex;
}
.centerBox > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.addressBox {
  display: flex;
}
.addressBox p {
  margin-right: 20px;
}
.footerBox {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>